<template>
  <!-- 回到顶部 -->
  <el-backtop class="backtop" :visibility-height="200" :right="8" :bottom="60">
    <div class="gotop"></div>
  </el-backtop>
  <!-- 音乐小按钮 -->
  <div class="rightPlay" @click="rightPlayShow = !rightPlayShow">
    <el-icon color="#49b1f5" :size="35" v-show="rightPlayShow">
      <VideoPause />
    </el-icon>
    <el-icon color="#49b1f5" :size="35" v-show="!rightPlayShow">
      <VideoPlay />
    </el-icon>
  </div>
  <audio ref="aud" src="https://api.uomg.com/api/rand.music"></audio>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { VideoPlay, VideoPause } from '@element-plus/icons-vue'
const rightPlayShow = ref<boolean>(false)
const aud = ref<HTMLAudioElement>()
watch(
  () => rightPlayShow.value,
  () => {
    if (rightPlayShow.value) {
      aud.value && aud.value.play()
    } else {
      aud.value && aud.value.pause()
    }
  }
)
</script>
<style lang="scss" scoped>
.rightPlay {
  position: fixed;
  z-index: 999;
  right: 8px;
  bottom: 10px;
  cursor: pointer;
}

.gotop {
  width: 30px;
  height: 30px;
  background: url(@/assets/goTop.svg) center no-repeat;
  background-size: 30px;
}
.backtop {
  width: 35px;
  height: 35px;
}
</style>
